import {queryRaffleStrategyRuleWeight} from "@/apis";
import {useEffect, useState} from "react";
import {StrategyRuleWeightVO} from "@/types/StrategyRuleWeightVO";

// @ts-ignore
export function StrategyRuleWeight({refresh}) {

    const [strategyRuleWeightVOList, setStrategyRuleWeightVOList] = useState<StrategyRuleWeightVO[]>([]);

    const queryRaffleStrategyRuleWeightHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await queryRaffleStrategyRuleWeight(String(queryParams.get('userId')), Number(queryParams.get('activityId')));
        const {code, info, data}: { code: string; info: string; data: StrategyRuleWeightVO[] } = await result.json();
        console.info("data",data);
        if (code != "0000") {
            window.alert("查询活动账户额度，接口调用失败 code:" + code + " info:" + info)
            return;
        }

        setStrategyRuleWeightVOList(data)
    }

    // 这是你的进度条组件
    // @ts-ignore
    const ProgressBar = ({index, total, completed, awards}) => {
        // 计算完成的百分比
        const percentage = (completed / total) * 100;

        // @ts-ignore
        // 假设组件接收以下 props:
// - index: 阶梯索引
// - percentage: 完成百分比
// - completed: 已完成次数
// - total: 总次数
// - awards: 奖品列表

        return (
            <div className="w-full max-w-[400px] bg-white rounded-xl shadow-lg overflow-hidden">
                {/* 顶部区域（固定高度） */}
                <div className="p-4 border-b border-gray-100">
                    <div className="flex items-center mb-3">
                        <div className="bg-blue-500 rounded-full w-6 h-6 flex items-center justify-center mr-3">
                            <span className="text-xs font-bold text-white">{index + 1}</span>
                        </div>
                        <span className="font-bold text-gray-800 text-sm">抽奖阶梯{index + 1}</span>
                    </div>

                    <div className="flex justify-between items-center text-xs text-gray-500 mb-1">
                        <span>当前进度</span>
                        <span className="font-medium text-blue-600">
          {completed > total ? total : completed}/{total}
        </span>
                    </div>

                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                        <div
                            className="h-full bg-gradient-to-r from-blue-500 to-blue-400 rounded-full"
                            style={{ width: `${percentage}%` }}
                        ></div>
                    </div>
                </div>

                {/* 奖品列表区域（固定高度 + 滚动） */}
                <div className="p-4 border-b border-gray-100 h-[180px] flex flex-col">
                    <div className="font-semibold text-gray-700 text-xs mb-2">可中奖品范围</div>

                    <div className="flex-grow overflow-y-auto pr-1">
                        {awards.map((award, idx) => (
                            <div
                                key={award.awardId}
                                className="flex items-center py-1.5 text-sm text-gray-600"
                            >
                                <span className="w-4 text-center text-xs font-medium text-blue-500">{idx + 1}.</span>
                                <span className="ml-1.5">{award.awardTitle}</span>
                            </div>
                        ))}
                    </div>
                </div>

                {/* 底部状态区域（固定高度） */}
                <div className="p-4 bg-gray-50 text-center text-xs text-gray-500 h-[50px] flex items-center justify-center">
                    {percentage === 100 ? (
                        <div className="flex items-center text-green-600">
                            <i className="fa fa-check-circle mr-1.5"></i>
                            <span>已完成，可领取奖励</span>
                        </div>
                    ) : (
                        <div className="flex items-center">
                            <i className="fa fa-arrow-up mr-1.5"></i>
                            <span>再完成{total - completed}次可解锁</span>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    useEffect(() => {
        queryRaffleStrategyRuleWeightHandle().then(r => {
        });
    }, [refresh])

    return (
        <>
            {strategyRuleWeightVOList.map((ruleWeight:StrategyRuleWeightVO, index) => (
                <div key={index}>
                    <ProgressBar index={index}
                                 total={ruleWeight.ruleWeightCount}
                                 completed={ruleWeight.userActivityAccountUseCount}
                                 awards={ruleWeight.strategyAwards}/>
                </div>
            ))}
        </>
    )

}
